<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta id="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
		<meta name="apple-themes-web-app-capable" content="yes">
		<meta content="yes" name="apple-mobile-web-app-capable">
		<meta content="black" name="apple-mobile-web-app-status-bar-style">
		<meta content="telephone=no" name="format-detection">
		<meta content="email=no" name="format-detection">
		<meta name="format-detection" content="telephone=no">
		<title>晒单</title>
		<link rel="stylesheet" href="${s.base}/mobile/css/main.css" type="text/css" media="all">
	</head>
	<style type="text/css">
    	
        body { font-size: 12px; line-height: 120%; text-align: center; color:#333;}
		#content_div{ padding:20px;}
        a { color: #333; text-decoration: none;}
        a:hover { text-decoration: underline;}
        * { margin: 0; padding: 0; border: none;}
        .clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden}
        .clearfix { *height:1%;}
        #list {text-align: left; width: 90%;}
        .box { border-top: 1px solid #eee; position: relative;  width: 100%; padding: 10px 0}
        .box:hover .close { display: block;}
        .close { display: none; top:0px; right: 0px; width: 28px; height: 28px; border: 1px solid #eee; position: absolute; background: #f2f4f7; line-height: 27px; text-align: center;}
        .close:hover { background: #c8d2e2; text-decoration: none;}
        .head { float: left; width: 60px; height: 60px; margin-right: 10px;}
        .content { float: left; width: 70%;}
        .main { margin-bottom: 10px;}
        .txt { margin-bottom: 10px;}
        .user { color: #369; }
        .pic { margin-right: 5px; width: 28%; border: 1px solid #eee;}
        .info { height: 20px; line-height: 19px; font-size: 12px; margin: 0 0 10px 0;}
        .info .time { color: #ccc; float: left; height: 20px; padding-left: 20px; background: url("../../../mobile/images/bg1.jpg") no-repeat left top;}
        .info .praise { color: #369; float: right; height: 20px; padding-left: 18px; background: url("images/bg2.jpg") no-repeat left top;}
        .info .praise:hover { text-decoration: underline; background: url("images/bg3.jpg") no-repeat left top;}
        .praises-total { margin: 0 0 10px 0; height: 20px; background: url("images/praise.png") no-repeat 5px 5px rgb(247, 247, 247); padding: 5px 0 5px 25px; line-height: 19px;}
        .comment-box { padding: 10px 0; border-top: 1px solid #eee;}
        .comment-box:hover { background: rgb(247, 247, 247);}
        .comment-box .myhead { float: left; width: 30px; height: 30px; margin-right: 10px;}
        .comment-box .comment-content { float: left; width: 400px; }
        .comment-box .comment-content .comment-time { color: #ccc; margin-top: 3px; line-height: 16px; position: relative;}
        .comment-box .comment-content .comment-praise { display: none; color: #369; padding-left: 17px; height: 20px; background: url("images/praise.png") no-repeat;  position: absolute; bottom: 0px; right: 44px;}
        .comment-box .comment-content .comment-operate { display: none; color: #369; height: 20px;  position: absolute; bottom: 0px; right: 10px;}
        .comment-box .comment-content:hover .comment-praise { display: inline-block;}
        .comment-box .comment-content:hover .comment-operate { display: inline-block;}
        .text-box .comment { border: 1px solid #eee; display: block; height: 15px; width: 100%; padding: 5px; resize: none; color: #ccc}
        .text-box .btn {     margin-top: 10px;font-size: 12px; font-weight: bold; display: none; float: right; width: 65px; height: 25px; border: 1px solid #0C528D; color: #fff; background: #4679AC;}
        .text-box .btn-off { border: 1px solid #ccc; color: #ccc; background: #F7F7F7;}
        .text-box .word{ display: none; float: right; margin: 17px 10px 0 0; color: #666;}
        .text-box-on .comment{ height: 50px; color: #333;}
        .text-box-on .btn{ display: inline;}
        .text-box-on .word{ display: inline;}
    </style>
	<body>
		<header id="header">
			<div class="header_con">
				<a href="javascript:history.go(-1);"><span></span></a> 
                <div class="top_tit">晒单</div>
			</div>
		</header>

		<div id="content_div" >
            <div id="list">
                <!--<div class="box clearfix">
                    <img class="head" src="${s.base}/mobile/images/1.jpg" alt=""/>
                    <div class="content">
                        <div class="main">
                            <p class="txt" style="margin-bottom: 2px;">
                                <span class="user">Andy：</span>轻轻的我走了，正如我轻轻的来；我轻轻的招手，作别西天的云彩。
                            </p>
                            <p class="txt">
                                <span class="user" style="color:#CCC;">[第2941期]Apple 手机 颜色随机</span>
                            </p>
                            <img class="pic" src="${s.base}/mobile/images/img1.jpg" alt=""/>
                            <img class="pic" src="${s.base}/mobile/images/img1.jpg" alt=""/>
                            <img class="pic" src="${s.base}/mobile/images/img1.jpg" alt=""/>
                            <img class="pic" src="${s.base}/mobile/images/img1.jpg" alt=""/>
                            <img class="pic" src="${s.base}/mobile/images/img1.jpg" alt=""/>
                        </div>
                        <div class="info clearfix">
                            <span class="time">02-14 23:01</span>
                        </div>
                    </div>
                </div>-->
            </div>
        </div>	
        <!--底部-->
        <!--底部结束-->
        <script type="text/javascript" src="${s.base}/mobile/js/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="${s.base}/mobile/js/dropload.min.js"></script>
        <script>
            $(function(){
                show();
            });
            function show(){
                var memberId = '${memberId}';
                var type = '${type}';
                // 每页展示5个
                var num = 5;
                var pageStart = 0,pageEnd = 0;
                // dropload
                $('#content_div').dropload({
                    scrollArea : window,
                    loadDownFn : function(me){
                        pageStart++;
                        $.post("/shareOrder/jsonList",{
                            limit : num,
                            page : pageStart,
                            memberId : memberId,
                            type : type
                        },function(resultInfo){
                            if (resultInfo.code == 0){
                                var result = '';
                                if (resultInfo.data!=null && resultInfo.data.length > 0){
                                    for(var i=0;i<resultInfo.data.length;i++){
                                        //console.log("测试:"+counter);
                                        var items=resultInfo.data[i];
                                        result += '<div class="box clearfix">'+
                                                '  <img class="head" src="'+items.memberHeadImage+'" />'+
                                                '<div class="content">'+
                                                '<div class="main">'+
                                                '<p class="txt" style="margin-bottom: 2px;">'+
                                                '   <span class="user">'+items.memberName+'：</span>'+items.content+
                                                '</p>'+
                                                '<p class="txt">'+
                                                '   <span class="user" style="color:#CCC;">[第'+items.periodsNum+'期]'+items.itemTitle+'</span>'+
                                                '</p>'+
                                            '<img class="pic" src="'+items.image+'" alt=""/>'+
                                            '</div>'+
                                            '<div class="info clearfix">'+
                                            '<span class="time">'+items.createtime+'</span>'+
                                            '</div>'+
                                            '</div>'+
                                            '</div>';
                                    }

                                }

                                $('#list').append(result);
                                // 每次数据加载完，必须重置
                                if(resultInfo.isLastPage||resultInfo.isLastPage=="true"){
                                    me.lock();
                                    // 无数据
                                    me.noData();
                                    $(".dropload-down").remove();
                                }else {
                                    me.resetload();
                                }
                            }
                        },"json");
                    }
                });
            }
        </script>
        <script type="text/javascript" src="${s.base}/mobile/js/common.js"></script>
	</body>

</html>